<template>
  <div class="container">
    <div class="common">
      <div class="relative">
        <img :src="pageImgArr.pic01" alt="">
        <span id="share" @click="shareForWechat">分享有惊喜</span>
      </div>
    </div>
    <div class="nav-tabs nav" ref="tabMenu" :class="{'fixed':scrollFixed}">
      <span :style="{'background':item.bgColor}" v-for="(item,index) in navTabsArr" :key="index" @click="scrollFun(index)">{{item.name}}</span>
    </div>
    <div :class="{'abandon':scrollFixed}" ref="abandon" ></div>
    <div class="swiper-container topic-title">
      <swiper :options="swiperOption">
        <swiper-slide v-for="(item, index) in pageGoodsIdArr.swiper" :key="index">
          <SelfItem :data='item' :index="index"/>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <div class="special-container topic-title">
      <div><img v-lazy="pageImgArr.pic02" alt=""></div>
      <div class="special02">
        <img v-lazy="pageImgArr.pic03" alt="">
        <div class="entry01" @click="goForSpecialDetail(70369)"></div><div class="entry02" @click="goForSpecialDetail(70373)"></div>
      </div>
      <div class="special03">
        <img v-lazy="pageImgArr.pic04" alt="">
        <div class="entry01" @click="goForSpecialDetail(70367)"></div><div class="entry02" @click="goForSpecialDetail(70269)"></div>
      </div>
      <div class="special04">
        <img v-lazy="pageImgArr.pic05" alt="">
        <div class="entry01" @click="goForSpecialDetail(70365)"></div>
      </div>
      <div class="special05"><img v-lazy="pageImgArr.pic06" alt=""><div class="entry01" @click="goForSpecialDetail(70263)"></div></div>
      <div class="special06">
        <img v-lazy="pageImgArr.pic07" alt="">
        <div class="entry01" @click="goForSpecialDetail(70379)"></div><div class="entry02" @click="goForSpecialDetail(70335)"></div>
      </div>
    </div>
    <div class="goods-container">
      <div class="topic-title"><img v-lazy="pageImgArr.pic08" alt=""></div>
      <div class="module-wrapper">
        <goods-item :parentData="item" @childEvent="goForGoodsDetail" v-for="(item,index) in pageGoodsIdArr.clothes" :key="index"/>
      </div>
      <div><img v-lazy="pageImgArr.pic09" alt=""></div>
      <div class="module-wrapper">
        <goods-item :parentData="item" @childEvent="goForGoodsDetail" v-for="(item,index) in pageGoodsIdArr.shirt" :key="index"/>
      </div>
      <div><img v-lazy="pageImgArr.pic10" alt=""></div>
      <div class="module-wrapper">
        <goods-item :parentData="item" @childEvent="goForGoodsDetail" v-for="(item,index) in pageGoodsIdArr.shoe" :key="index"/>
      </div>
    </div>
    <div class="more" v-if="moreData.specialArrList.length">
      <div><img v-lazy="pageImgArr.pic11" alt=""></div>
      <special-item :parentData="item" @childEvent="goForSpecialDetail" v-for="(item,index) in moreData.specialArrList" :key="index"/>
    </div>
    <!-- toast提示 -->
    <transition name="fade">
      <ToastModal :data="modalData" v-if="showModal" v-on:closeModal="showModal=false;" />
    </transition>
  </div>
</template>
<script>
  import GoodsItem from 'components/GoodsItems/lineThree.vue'
  import SelfItem from './swiper.vue'
  import SpecialItem from 'components/GoodsItems/specialItem.vue'
  import ToastModal from 'components/maskModal/maskModal.vue'
  import MaskModal from 'components/maskDown/index.js'
  import { getGoodsListApi, getCouponList, isGetCouponApi, handleMoreApi} from "@/apis/publicApi.js";
  let scrollTimer=null;
  export default {
    components:{GoodsItem,SelfItem,ToastModal,SpecialItem},
    data(){
      return{
        userInfo:{user_id:null},
        navTabsArr:[
          {name:'潮A造型',bgColor:'#C9342E'},
          {name:'时尚大牌',bgColor:'#2D2F93'},
          {name:'时髦单品',bgColor:'#2F6C43'}
        ],
        pageImgArr:{},
        scrollFixed:false,//是否固定tab
        modalData:{modalType:0},//传递弹窗数据
        showModal:false,//显示弹窗
        isGetCouponed:false,//是否已领取
        btnClicked:false,//分享按钮被点击
        turnOnForIos:false,//是否支持ios后台状态
        swiperOption:{
          pagination: {
            el: '.swiper-pagination',
            renderBullet:function(index,className){
              return   `<span class="${className}">${index+1}</span>`;
            }
          }
        },
        swiperGoodsIds:'1591915,1585015,1588147,1586725,1585013,1585009,1588149,1588157,1586723,1588125,1585011,1585017',
        pageGoodsIds:[
          1588159,1586677,1588161,1586679,1586681,1586683,1591917,1586705,1586713,1591919,1591923,1591331,1586687,1591395,1586691,
          1588155,1586693,1586711,1586715,1586717,1591925,1588133,1586721,1591921,1591913,1586697,1586729,1586731,1586699,1586733,
          1591237,1592419,1588129,1588131,1588137,1588127,1592421,1588153,1592423,1588163,1588165,1588167,1588169,1588139,1588141
        ],
        pageGoodsIdArr:{swiper:[],clothes:[],shirt:[],shoe:[]},
        moreData:{
          reqestIds:'70371,70369,70367,70363,70361,70373,70263,70269,70333,70247,70251,70337,70339,70341,70357,70331,70335,70273,70343,70345,70379,70365,70351,70303,70291,70305,70307,68307,70401',
          goodsIds:[],
          goodsArrList:[],
          specialArrList:[]
        }
      }
    },
    created(){
      let that=this;
      if( this.shareJudge('isshare') ){ MaskModal(); }
      this.$navtiveUtils.checkLogin();
      window.isLogin=function(uuid){
        if(uuid){
          let userInfo = { user_id: uuid };
          window.userInfo = userInfo;
          that.userInfo = userInfo;
          that.shareCouponStatus();
        }else{
          that.$navtiveUtils.onLogin();
        }
      }
      this.initPageImg();
      this.getGoodsForSwiper();//swiper区域的商品
      this.getGoodsAction();//常规区域的商品
    },
    mounted(){
      let that=this;
      let tabLimitDis = 0;
      scrollTimer=setTimeout(function() {
        tabLimitDis = that.$refs.tabMenu.offsetTop;
      }, 300);
      window.onscroll = function() {
        let tabLimitDis = that.$refs.abandon.offsetTop;
        let pageTop = window.scrollY;
        if (pageTop >= tabLimitDis) { that.scrollFixed=true;} 
        else {that.scrollFixed=false;}
      };
      if(typeof document.addEventListener === 'undefined' || typeof document.hidden=== 'undefined' || typeof document.webkitHidden=== 'undefined'){
        console.log(' 浏览器不支持addEventListener OR Page Visibility API');
        that.turnOnForIos=true;//不支持时添加开关按钮
      }else{
        document.addEventListener("visibilitychange",function(){
          let isShared=document.hidden;
          if( !isShared && that.btnClicked && !that.isGetCouponed ){ that.shareCouponAction(); }
        });
      };
      this.moreSpecial();
    },
    methods:{
      initPageImg(){
        this.pageImgArr={
          pic01:require('../../../assets/img/yxWeeks/week01.jpg'),
          pic02:require('../../../assets/img/yxWeeks/week02.jpg'),
          pic03:require('../../../assets/img/yxWeeks/week03.jpg'),
          pic04:require('../../../assets/img/yxWeeks/week04.jpg'),
          pic05:require('../../../assets/img/yxWeeks/week05.jpg'),
          pic06:require('../../../assets/img/yxWeeks/week06.jpg'),
          pic07:require('../../../assets/img/yxWeeks/week07.jpg'),
          pic08:require('../../../assets/img/yxWeeks/week08.jpg'),
          pic09:require('../../../assets/img/yxWeeks/week09.jpg'),
          pic10:require('../../../assets/img/yxWeeks/week10.jpg'),
          pic11:require('../../../assets/img/yxWeeks/week11.jpg'),
          pic16:require('../../../assets/img/yxWeeks/week12.png'),
          pic17:require('../../../assets/img/yxWeeks/week13.gif')
        }
      },
      goForGoodsDetail(id){
        this.$navtiveUtils.jump2goods(id);
      },
      goForSpecialDetail(id){
        this.$navtiveUtils.jump2special(id);
      },
      getGoodsForSwiper(){
        let param=this.swiperGoodsIds;
        getGoodsListApi(param).then(res =>{
          for(let i=0;i<4;i++){
            let list=res.data.slice(i*3,(i+1)*3);
            this.pageGoodsIdArr.swiper.push(list);
          };
        })
      },
      getGoodsAction(){
        let param=this.pageGoodsIds.toString();
        getGoodsListApi(param).then(res =>{
          this.pageGoodsIdArr.clothes=res.data.slice(0,15);
          this.pageGoodsIdArr.shirt=res.data.slice(15,30);
          this.pageGoodsIdArr.shoe=res.data.slice(30);
        })
      },
      moreSpecial(){
        handleMoreApi(this.moreData.reqestIds).then(res => {
          this.moreData.specialArrList = res.data;
        });
      },
      shareJudge(e) {
        let temp = window.location.search.replace("?", "").split("&");
        let isFlag = false;
        for (let index = 0; index < temp.length; index++) {
          isFlag += temp[index].split("=").includes(e);
        }
        return isFlag;
      },
      shareForWechat() {
        let that = this;
        let pageTitle=document.title ;
        that.btnClicked=true;//分享按钮被点击
        setTimeout(function() {
          that.$navtiveUtils.share(pageTitle, "潮流精选好货，限时折扣中，快来抢购！","");
        }, 300);
        if(!that.isGetCouponed && that.btnClicked && that.turnOnForIos){
          shareTimer = setTimeout(function(){that.shareCouponAction()},2500)
        }
      },
      shareCouponStatus(){
        let that = this;
        let userId = window.userInfo.user_id;
        isGetCouponApi(userId, 9).then(({ data }) => {
          if (data.member && data.member.length > 0) {
            data.member.forEach((item, index) => {
              that.isGetCouponed = item.coupon_id == "1581" && item.coupon_status ;
            });
          }
        });
      },
      shareCouponAction(){
        let that=this;
        if(window.userInfo && window.userInfo.user_id){
          let userId = window.userInfo.user_id;
          getCouponList(userId,'1581',9).then(res =>{
            if (res.code == 200 && res.status == "success") {
              that.isGetCouponed=true;//领取券成功
              that.btnClicked=false;//领券成功重置按钮点击状态
              that.modalData.modalType=1;
              this.showModal=true;
            }else{
              that.$vux.toast.text(`${res.message}`, "middle")
            }
          })
        }else{
          this.$navtiveUtils.checkLogin();
        }
      },
      scrollFun(idx) {
        let domEl = document.querySelectorAll(".container .topic-title");
        let tabHeight = document.querySelectorAll(".nav")[0].clientHeight;
        let domElTop = domEl[idx].offsetTop - tabHeight;
        window.scrollTo({ top: domElTop, behavior: "smooth" });
      }
    },
    destroyed(){
      scrollTimer=null;
      window.clearTimeout(scrollTimer);
    }
  }
</script>
<style>
.swiper-pagination-bullets{
  display: flex;
  height: 20px;
  align-items: center;
  justify-content: center;
  bottom: 6px!important;
}
.swiper-pagination-bullet{
  width: 12px !important;
  height: 12px !important;
  line-height: 12px;
  font-size: 0.2rem;
  color: #000;
  font-family: '微软雅黑';
  opacity: 1!important;
  background: #fff!important;
}
.swiper-pagination-bullet-active{
  width: 14px !important;
  height: 14px !important;
  line-height: 14px;
  font-size: 0.22rem;
  margin-top: -1px!important;
}
</style>

<style lang="less" scoped>
.relative{
  position: relative;
  #share{
    width: 1.25rem;
    height: 0.45rem;
    padding: 0 0.1rem 0 0.15rem;
    line-height: 0.45rem;
    font-size: 0.24rem;
    color: #2E2F92;
    border-radius: 0.45rem 0 0 0.45rem;
    background: #fff;
    position: absolute;
    top: 0.2rem;right: 0;
  }
}
.nav-tabs{
  display: flex;
  width: 100%;
  height: 0.8rem;
  line-height: 0.6rem;
  align-items: center;
  justify-content: space-around;
  text-align: center;
  color: #fff;
  font-size: 0.26rem;
  background: #000;
  &>span{
    flex: 1;
    margin: 0 0.07rem;
  }
  &.fixed{
    position: fixed;
    top: 0;left: 0;
    z-index: 50;
  }
}
.abandon{padding-top:0.8rem;background: #000; }
.swiper-container{
  width: 100%;
  overflow: hidden;
  font-size: 0.24rem;
  color: #fff;
}
.special-container{
  &>div{position: relative;}
  div[class*='entry']{
    width: 2.9rem;height: 1.9rem;
    position: absolute;
    top: 0rem;left: 0.58rem;
  }
  .special02 .entry02{top:1.85rem;left: 4.35rem;}
  .special03 .entry02{top:1.85rem;left: 4.0rem;}
  .special04 .entry01{height: 1.6rem;top:0rem;left: 0.5rem;}
  .special05 .entry01{top:0rem;left: 2.75rem;}
  .special06 .entry01{top:0.2rem;left: 0.72rem;}
  .special06 .entry02{top:0.5rem;left: 4rem;}
}
.module{
  background-image: url('../../../assets/img/derssNote/derssNote16.jpg');
  background-repeat: repeat-y;
  background-size: contain;
  &:nth-child(2n){background: #000;}
}
.module-wrapper{
  display: flex;
  flex-wrap: wrap;
  font-family: '微软雅黑';
  padding: 0.1rem 0.15rem 0rem;
  font-size: 0.3rem;
  background: #000;
}
.more {
  .special {position: relative;}
  .info-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 0.6rem;
    padding: 0 0.3rem;
    line-height: 0.6rem;
    color: #666;
    font-size: 0.28rem;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    box-sizing: border-box;
    .title {
      width: 55%;
      height: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .date {
      width: 30%;
      height: 100%;
      text-align: right;
    }
  }
}
</style>